// 封装懒加载插件
// 引入VueUse的UseIntersectionObserver函数可以监听DOM元素是否进入视口区域
import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
    install(app){
     // 懒加载指令逻辑
        // 定义全局指令
app.directive('img-lazy',{
    mounted(el,binding){
      // el:指令绑定的那个元素 img
      // binding：binding.value 指令等于号后面绑定的表达式的值 图片url
        // console.log(el,binding.value);
        const { stop } = useIntersectionObserver(
            el, //监听的元素
            ([{ isIntersecting }]) => { //布尔值，进入视口区域未true，否则为false
                // console.log(isIntersecting);
                if(isIntersecting){
                    // 进入视口区域
                    el.src = binding.value
                    stop()
                }
            },
          )
    }
})
    }
}